<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>小组成员展示</title>
	<script src='./js/prefixfree.min.js'></script>
	<style>
		body {
			background-color: #EFEFEF
		}

		.blue {
			color: #56aadb;
			font-size: 19px;
		}

		.ju {
			color: #cc7f49;
		}

		div.flip-3d {
			perspective: 1200px;
			width: 25%;
			float: left;
		}

		div.flip-3d figure {
			position: relative;
			transform-style: preserve-3d;
			transition: 1s transform;
			font-size: 1.6rem;
		}

		div.flip-3d figure img {
			width: 100%;
			height: auto;
		}

		div.flip-3d figure figcaption {
			position: absolute;
			width: 100%;
			height: 80%;
			top: 0;
			transform: rotateY(.5turn) translateZ(1px);
			background: rgba(255, 255, 255, 0.9);
			text-align: center;
			padding-top: 45%;
			opacity: 0.6;
			transition: 1s .5s opacity;
		}

		div.flip-3d:hover figure {
			transform: rotateY(.5turn);
		}

		div.flip-3d:hover figure figcaption {
			opacity: 1;
		}

		div.flip-3d figure:after {
			content: " ";
			display: block;
			height: 8vw;
			width: 100%;
			transform: rotateX(90deg);
			background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
		}

		@media screen and (max-width: 800px) {
			div#flip-3d {
				perspective-origin: center top;
			}
			div#flip-3d figure {
				float: none;
				width: 50%;
				margin: 0 auto;
				margin-bottom: 12vw;
			}
			div.flip-3d figure figcaption {
				font-size: 0.8rem;
			}
			div#flip-3d figure:last-child {
				display: none;
			}
		}
	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<div class="jq22-container">
		<header class="jq22-header bgcolor-11" style="margin-left: 40px;font-size: 25px;">
			<h4>个人blog
				<span class="blue">English:liu wan de self blog</span>
				<p style="color: #cc7f49;">小组成员展示</p>
			</h4>
		
		</header>
		<div class="jq22-content">
			<div class="flip-3d">
				<figure>
					<img src="img/people/gutianle.jpg" alt="">
					<figcaption style="font-size: 21px;">组长:
						<span class="blue">古天乐<span>
						<p class="ju">负责板块:
							<span class="blue">文章管理与部分相册管理</span>
						</p>
					</figcaption>
				</figure>
			</div>

			<div class="flip-3d">
				<figure>
					<img src="img/people/55.jpg" alt="这货不是五五开">
					<figcaption style="font-size: 21px;">成员:
						<span class="blue">五五开</span>
						<p class="ju">负责板块:
							<span class="blue">个人资料的修改与主页</span>
						</p>
					</figcaption>
				</figure>
			</div>
			<div class="flip-3d">
				<figure>
					<img src="img/people/200wuyanzu.jpg" alt="">
					<figcaption style="font-size: 21px;">成员:
						<span class="blue">吴彦祖</span>
						<p class="ju">负责板块:
							<span class="blue">相册管理与评论管理</span>
						</p>
					</figcaption>

				</figure>
			</div>
			<div class="flip-3d">
				<figure>
					<img src="img/people/xiaohua.jpg" alt="">
					<figcaption style="font-size: 21px;">成员:
						<span class="blue">霍建华</span>
						<p class="ju">负责板块:
							<span class="blue">背景管理,blog模板,登录页面</span>
						</p>
					</figcaption>
				</figure>
			</div>
		</div>
	</div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script>
	$(function(){
		$(".flip-3d").on("mouseenter",function(e){
			console.log(1);
			$(this).siblings().stop().fadeTo(500,0.2);
		});
		$(".flip-3d").on("mouseleave",function(e){
			$(this).siblings().stop().fadeTo(500,1);
		});
	})
</script>